<template>
  <div>
    <tableComponents
      :pagination="{ currentPage, pageSize, total: list.all_num }"
      @handleCurrentChange="handleCurrentChange"
      @handleSizeChange="handleSizeChange"
      @sendUserSearch="getSearch"
      :searchData="userSearchData"
      :isHaveExport="false"
      :isHaveAdd="false"
    >
      <template v-slot:table>
        <el-table
          ref="multipleTable"
          :data="list.data"
          v-loading="loading"
          header-row-class-name="head_color"
          stripe
          tooltip-effect="dark"
          style="width: 99.9%"
        >
          <el-table-column label="订单号" min-width="140">
            <template slot-scope="scope">
              {{ scope.row.oid || "----" }}
            </template>
          </el-table-column>

          <el-table-column label="商品" min-width="250">
            <template slot-scope="scope">
              <div class="user_table">
                <p>
                  <span>商品名称：</span>
                  <small>{{ scope.row.title || "----" }}</small>
                </p>
                <p v-if="scope.row.sku_cn">
                  <span>规格：</span>
                  <small>{{ scope.row.sku_cn || "----" }}</small>
                </p>
              </div>
            </template>
          </el-table-column>

          <el-table-column label="类型" min-width="120">
            <template slot-scope="scope">
              {{ scope.row.extract_id > 0 ? `分店` : `总部` }}
              <span v-if="scope.row.extract_id > 0">
                ：{{ scope.row.extract_cn || "----" }}
              </span>
            </template>
          </el-table-column>

          <el-table-column label="库存" min-width="160">
            <template slot-scope="scope">
              <div class="user_table">
                <p>
                  <span>数量：</span>
                  <small>
                    {{
                      scope.row.types == 1
                        ? "+"
                        : scope.row.types == 2
                        ? "-"
                        : ""
                    }}{{ scope.row.stock }}
                  </small>
                </p>
                <p>
                  <span>剩余库存：</span>
                  <small>
                    {{ scope.row.balance }}
                  </small>
                </p>
                <p>
                  <span>总金额：</span>
                  <small>
                    {{ scope.row.price | keepTwoNum }}
                  </small>
                </p>
              </div>
            </template>
          </el-table-column>

          <el-table-column label="记录" min-width="160">
            <template slot-scope="scope">
              <div class="user_table">
                <p>
                  <span>时间：</span>
                  <small>{{ scope.row.created_time | getTimeFormat }}</small>
                </p>
                <p>
                  <span>操作员：</span>
                  <small>{{ scope.row.operator || "----" }}</small>
                </p>
              </div>
            </template>
          </el-table-column>

          <el-table-column label="备注" min-width="140">
            <template slot-scope="scope">
              {{ scope.row.remark || "----" }}
            </template>
          </el-table-column>
        </el-table>
      </template>
    </tableComponents>
  </div>
</template>

<script>
import { productStockSearchData } from "@/assets/js/searchData/searchData"; //引入搜索的数据
export default {
  data() {
    return {
      userSearchData: productStockSearchData,
      searchAll: {},
      loading: false,
      list: [],
      pageSize: 10,
      currentPage: 1,
    };
  },
  components: {},
  created() {
    this.getNewsAll();
  },
  methods: {
    getSearch(obj) {
      this.searchAll = obj;
      this.getNewsAll(obj);
    },
    handleSizeChange(val) {
      var params = this.searchAll;
      params.page = "";
      params.page_size = val;
      this.getNewsAll(params);
      this.pageSize = val;
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      var params = this.searchAll;
      params.page = val;
      params.page_size = this.pageSize;
      this.getNewsAll(params);
    },
    getNewsAll(data) {
      this.loading = true;
      var params = {};
      data = data || {};
      params = data;
      if (this.$route.query.types) {
        params.types = this.$route.query.types;
      }
      if (this.$route.query.is_extract) {
        params.is_extract = this.$route.query.is_extract;
      }
      if (this.$route.query.pid) {
        params.pid = this.$route.query.pid;
      }
      if (this.$route.query.sku_iden) {
        params.sku_iden = this.$route.query.sku_iden;
      }

      this.$api.getShops.product_stock_lists(params).then((res) => {
        if (res.data.code == 200) {
          this.list = res.data.result;
        }
        this.loading = false;
      });
    },
    imgError(item) {
      if (!item) {
        return require("@/assets/img/default_head.png");
      }
      return item;
    },
  },
  watch: {
    $route() {
      this.getNewsAll();
    },
  },
};
</script>

<style>
</style>